<!--
 * @Author: jiu yin
 * @Date: 2024-04-09 10:05:00
 * @LastEditTime: 2024-04-29 12:08:58
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \web-smart-tour\src\pages\personal\index.vue
 * jiu
-->
<template>
	<view class="content bg-#F6F9F8 h-100vh">
		<view></view>
		<text></text>
		<view class="personal_title_bg h-484rpx flex flex-col items-center">
			<text class="font-700 text-#3D3D3D text-34rpx pt-112rpx">个人中心</text>
			<view class="position-relative mt-56rpx mb-16rpx">
				<image
					v-if="userInfo.avatar"
					class="border-rd-50% border-6rpx w-132rpx h-132rpx"
					mode="aspectFill"
					:src="ossurl(userInfo.avatar, 'user_face')"
					@click="setInfo"
				></image>
				<image v-else class="border-rd-50% border-6rpx w-132rpx h-132rpx" mode="aspectFill" src="../../static/images/avatar.png" @click="setInfo"></image>
			</view>
			<text v-if="!is_logined" @click="handleLogin" class="font-700 text-#3D3D3D text-34rpx">登录/注册</text>
			<text v-else class="font-700 text-#3D3D3D text-34rpx">{{ userInfo.nick_name }}</text>
		</view>

		<view class="order box-border m-auto w-702rpx h-282rpx transform-translate-y--46rpx p-32rpx">
			<view class="my_order_tag w-112rpx font-700 text-#3D3D3D text-28rpx position-relative">我的订单</view>
			<view class="mt-46rpx flex">
				<view v-for="(item, index) in my_order" :key="index" class="flex-1 flex flex-col items-center">
					<image @click="toOrderPage(index + 1)" class="w-72rpx h-72rpx mb-24rpx" :src="item.src"></image>
					<view>{{ item.name }}</view>
				</view>
			</view>
		</view>

		<view class="box-border m-auto w-702rpx bg-#fff pt-16rpx pb-16rpx pl-32rpx pr-32rpx border-rd-24rpx">
			<view
				class="flex items-center justify-between h-96rpx"
				v-for="(item, index) in about"
				v-show="!(item.code == 'logout' && !is_logined)"
				:key="index"
				@click="toPage(item.sort)"
			>
				<view class="flex items-center">
					<image class="w-40rpx h-40rpx mr-16rpx" :src="item.src">{{ item.name }}</image>
				</view>
				<u-icon name="arrow-right" size="20" class="align-text-bottom"></u-icon>
			</view>
		</view>

		<uni-popup ref="useShow" type="center" background-color="#fff">
			<view class="personal-use">
				<view class="use-title">
					{{ treatyType == 'user_protocol' ? '云梦智慧游使用条款' : '云梦智慧游隐私政策' }}
				</view>
				<view class="use-con">
					<rich-text :nodes="infoText"></rich-text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="serviceShow" type="bottom" borderRadius="32rpx 32rpx 0 0" background-color="#fff">
			<view class="personal-service">
				<view class="service-text" @click="makePhoneCall">呼叫 {{ contactInfo.contact }}</view>
				<view class="service-line"></view>
				<view class="service-text" @click="this.$refs.serviceShow.close()">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { navigateTo, navigateBack } from '@/hooks';
	import { getPhone } from '@/utils/index.js';
	import { treatyInfo, out } from '@/api/home.js';
	import store from '@/store';
	import { mapGetters, mapActions } from 'vuex';
	import { ossurl } from '@/utils/index';

	export default {
		data() {
			return {
				navigateTo,
				my_order: [
					{
						name: '全部订单',
						src: '../../static/images/my_order1.png',
					},
					{
						name: '待付款',
						src: '../../static/images/my_order2.png',
					},
					{
						name: '已完成',
						src: '../../static/images/my_order3.png',
					},
				],
				about: [
					{
						name: 'AI合影',
						src: '../../static/images/about6.png',
						sort:1,
					},
					{
						name: '我的打卡',
						src: '../../static/images/about7.png',
						sort:2,
					},
					{
						name: '游览日志',
						src: '../../static/images/about1.png',
						sort:3,
					},
					{
						name: '使用条款',
						src: '../../static/images/about2.png',
						sort:4,
					},
					{
						name: '隐私政策',
						src: '../../static/images/about3.png',
						sort:5,
					},
					{
						name: '联系客服',
						src: '../../static/images/about4.png',
						sort:6,
					},
					{
						name: '退出登录',
						code: 'logout',
						src: '../../static/images/about5.png',
						sort:7,
					},
				],
				treatyType: '',
				infoText: '',
			};
		},
		computed: {
			...mapGetters(['is_logined', 'userInfo', 'rec_url', 'fileDeploy']),
			contactInfo() {
				if (!this.fileDeploy?.customer_service) {
					return {};
				}
				return this.fileDeploy?.customer_service;
			},
		},
		methods: {
			ossurl,
			...mapActions(['logout']),
			handleLogin() {
				store.commit('userInfo/set_is_login_popup', true);
			},
			toOrderPage(val) {
				switch (val) {
					case 1:
						navigateTo('/pagesA/order_list/index?type=0');
						break;
					case 2:
						navigateTo('/pagesA/order_list/index?type=1');
						break;
					case 3:
						navigateTo('/pagesA/order_list/index?type=2');
						break;
					default:
						break;
				}
			},
			toPage(val) {
				switch (val) {
					case 1:
						navigateTo('/pagesB/photo/photo_step_5');
						break;
					case 2:
						navigateTo('/pagesA/scenic_punch/log');
						break;
					case 3:
						navigateTo('/pagesA/tour_log/index');
						break;
					case 4:
						this.treatyType = 'user_protocol';
						this.$refs.useShow.open('center');
						this.getTreatyInfo();
						break;
					case 5:
						this.treatyType = 'privacy_policy';
						this.$refs.useShow.open('center');
						this.getTreatyInfo();
						break;
					case 6:
						this.$refs.serviceShow.open('bottom');
						break;
					case 7:
						this.logout();
						out().then((res) => {});
						break;
					default:
						break;
				}
			},
			getTreatyInfo() {
				treatyInfo({ type: this.treatyType }).then((res) => {
					if (res.code == 200) {
						let richtext = res.data.content;

						const regex = new RegExp('<img', 'gi');
						const regexVideo = new RegExp('<video', 'gi');
						richtext = richtext.replace(regex, '<img style="max-width: 100%;"');
						richtext = richtext.replace(regexVideo, '<video style="width: 100%;"');

						this.infoText = richtext;
					}
				});
			},
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.contactInfo.contact,
				});
			},
			setInfo(){
				var _this =this;
				if(!_this.is_logined)
				{
					_this.handleLogin();
					return;
				}
				uni.navigateTo({
					url:'/pagesA/account/index'
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.personal_title_bg {
		background: url('https://resources.ym2meta.com/web-smart-tour/personal_title.png') no-repeat;
		background-size: 100% 100%;
	}

	@mixin avatar_up {
		background: url('@/static/images/avatar_up.png') no-repeat;
		background-size: 100% 100%;
		width: 36rpx;
		height: 28rpx;
	}

	.avatar_tag {
		box-sizing: border-box;
		&::before {
			content: '';
			position: absolute;
			top: 8rpx;
			right: -4rpx;
			@include avatar_up;
		}
	}

	.order {
		background: linear-gradient(180deg, #def8f0 0%, #ffffff 47%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 4rpx solid #ffffff;

		.my_order_tag {
			&::before {
				content: '';
				position: absolute;
				top: -8rpx;
				right: -42rpx;
				@include avatar_up;
			}
		}
	}

	.personal-service {
		.service-text {
			padding: 28rpx 0 0;
			text-align: center;
		}
		.service-line {
			height: 12rpx;
			margin-top: 28rpx;
			background: #f6f9f8;
		}
		.vue-ref {
			padding-bottom: 0 !important;
		}
	}

	.personal-use {
		width: 600rpx;
		overflow-x: hidden;
		overflow-y: scroll;
		margin: 0 auto;
		padding: 20rpx;
		position: relative;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		background-color: #fff;
		background-image: url('../../static/images/popup-bg.png');
		background-size: 100% 160rpx;
		background-repeat: no-repeat;
		border-radius: 32rpx;

		.use-title {
			margin-bottom: 24rpx;
			text-align: center;
			font-weight: 700;
			font-size: 32rpx;
			color: #3d3d3d;
		}
		.use-con {
			height: 800rpx;
			overflow-x: hidden;
			overflow-y: scroll;
		}
	}
</style>
